import React, { Component } from 'react';
import '../../style/AllgoodsScss/header.scss'
class Header extends Component {
    state={
        currentIndex:0,
        list:[
            {name:'综合'},
            {name:'销量'},
            {name:'新品'},
            {name:'价格↓'},
            {name:'筛选'},
        ]
    }
    handleClick(index){
        this.setState({currentIndex:index})
    }
    render() {
        return (
            <div className="header">
                <p>全部商品</p>
                <input type="text" placeholder='搜索店铺内商品' />
                <nav>
                    {
                        this.state.list.map((item,index)=>{
                            return <span key={index} onClick={()=>{ this.handleClick(index) }} className={ this.state.currentIndex ===index? 'active' :''}>{item.name}</span>
                        })
                    }
                </nav>
            </div>
        );
    }
}

export default Header;